<template>
    <el-dialog :append-to-body="true" v-model="visible" width="822" :before-close="handleClose"
        class="personal-profile-dialog">
        <div class="content">
            <h3>个人资料</h3>
            <div class="profile-card">
                <div class="avatar-container">
                    <el-avatar class="user-avatar">
                        <img v-if="userInfo.portraiturl" :src="userInfo.portraiturl" alt="用户头像">
                        <span v-else>{{ userInfo.nickname ? userInfo.nickname.charAt(0) : 'L' }}</span>
                    </el-avatar>
                </div>
                <div class="profile-info">
                    <div class="nickname-section">
                        <span class="nickname">{{ userInfo.nickname }}</span>
                        <el-button type="text" size="small" class="edit-btn" @click="handleEdit">
                            <img src="@/assets/images/userCenter/edit.png" alt="">
                        </el-button>
                    </div>
                    <div class="id-info">
                        <span>ID: {{ userInfo.uid }}</span>
                        <el-button type="text" size="small" class="copy-btn" @click="handleCopyID">
                            <img src="@/assets/images/userCenter/copy.png" alt="">
                        </el-button>
                    </div>
                    <div class="phone-info">
                        {{ userInfo.phone && userInfo.phone.substring(0, 3) + '****' + userInfo.phone.substring(7) }}
                    </div>
                </div>
            </div>
        </div>


        <!-- 编辑昵称弹窗 -->
        <el-dialog :append-to-body="true" v-model="nicknameVisible" width="366"
            :before-close="handleNicknameVisibleClose" class="change-nickname-dialog" center append-to-body>
            <div class="content">
                <h3>修改昵称</h3>
                <el-input class="nickname-input" v-model="nickname" placeholder="请输入新昵称" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="nicknameVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleNicknameVisibleOk">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { domesticUserCenter } from 'ld-web-sdk';
import successIcon from '@/assets/images/success-icon.png'


// Props
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})

const userStore = useUserStore()
// 获取用户信息
const userInfo = computed(() => userStore.userInfo)
// 昵称弹窗可见性
const nicknameVisible = ref(false)
// 昵称输入框值
const nickname = ref('')





// Refs
const visible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
})

// 方法
const handleClose = () => {
    emit('close')
}


// 处理昵称弹窗确定
const handleNicknameVisibleOk = async () => {
    await domesticUserCenter.createUpdateUser().modifyUserInfo({
        nickName: nickname.value,
        portraitUrl: userInfo.value.portraiturl
    }).then(res => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                customClass: 'custom-success-message-icon',
                dangerouslyUseHTMLString: true,
                message: `<img src="${successIcon}" alt="success-icon" style="width: 20px; height: 20px; margin-right: 4px;">修改成功`,
                offset: 65
            })
            userStore.RefreshUserInfo()
            nicknameVisible.value = false
        }
    }).catch(err => {
        console.log('err', err)
        ElMessage({
            type: 'error',
            customClass: 'custom-error-message-icon',
            dangerouslyUseHTMLString: true,
            message: `<img src="${successIcon}" alt="success-icon" style="width: 20px; height: 20px; margin-right: 4px;">${err.message}`,
            offset: 65
        })
        nicknameVisible.value = false
    })



}

// 处理昵称弹窗关闭
const handleNicknameVisibleClose = () => {
    nicknameVisible.value = false
}

// Emits
const emit = defineEmits(['update:modelValue', 'close'])

// 处理编辑昵称
const handleEdit = () => {
    // 打开昵称弹窗
    nicknameVisible.value = true
    console.log("打开弹窗。。。");

}

// 处理编辑昵称确认
const handleEditNickname = (nickname) => {
    // 关闭昵称弹窗
    nicknameVisible.value = false
    // 调用更新昵称接口
    userStore.updateNickname({ realname: nickname }).then(() => {
        // 更新用户信息
        userInfo.value.realname = nickname
        // 关闭个人资料弹窗
        visible.value = false
    })
}

// 复制用户ID到剪贴板
const handleCopyID = () => {
    if (userInfo.value.uid) {
        try {
            // 创建临时textarea元素来复制文本
            const textarea = document.createElement('textarea')
            textarea.value = userInfo.value.uid
            // 使textarea不可见但可选中
            textarea.style.position = 'fixed'
            textarea.style.left = '-999999px'
            textarea.style.top = '-999999px'
            document.body.appendChild(textarea)
            // 选中并复制
            textarea.select()
            document.execCommand('copy')
            // 清理
            document.body.removeChild(textarea)

            // 使用Element Plus的消息组件显示成功提示
            ElMessage({
                type: 'success',
                customClass: 'custom-success-message-icon',
                dangerouslyUseHTMLString: true,
                message: `<img src="${successIcon}" alt="success-icon" style="width: 20px; height: 20px; margin-right: 4px;">已复制到剪贴板`,
                offset: 65
            })
        } catch (err) {
            console.error('复制失败:', err)
            ElMessage.error('复制失败，请重试')
        }
    } else {
        ElMessage.warning('暂无用户ID可复制')
    }
}
</script>


<style lang="scss">
.personal-profile-dialog {
    height: 568px;
    box-sizing: border-box;

    .el-dialog__body {
        padding: 30px 0 0 0 !important;
        background-color: transparent;

        h3 {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 30px;
            padding: 0 20px;
        }
    }

    .el-dialog__close {
        color: #fff;
        font-size: 24px;
        opacity: 0.7;
        transition: opacity 0.3s;

        &:hover {
            opacity: 1;
            color: #fff;
        }
    }

    .content {
        width: 100%;
        padding: 0 40px 40px 40px;
    }

    .profile-card {
        padding: 30px;
        height: 115px;
        background: linear-gradient(135deg, rgba(24, 28, 41, 0.8) 0%, rgba(45, 49, 66, 0.8) 100%);
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 24px;
        position: relative;
        overflow: hidden;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
        }

        .avatar-container {
            flex-shrink: 0;
        }

        .user-avatar {
            width: 66px;
            height: 66px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            box-sizing: border-box;
        }

        .profile-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .nickname-section {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nickname {
            color: #e2e2e2;
            font-size: 15px;
        }

        .edit-btn,
        .copy-btn {
            color: rgba(255, 255, 255, 0.6);
            padding: 0;
            min-width: auto;
            font-size: 14px;
            transition: color 0.3s;

            &:hover {
                color: #fff;
                background: transparent;
            }
        }

        .id-info,
        .phone-info {
            font-size: 12px;
            color: #888;
            display: flex;
            align-items: center;
            gap: 8px;
        }
    }
}

.change-nickname-dialog {
    .el-dialog__header {
        padding: 20px !important;

        .el-dialog__title {
            color: #fff;
        }
    }

    .el-dialog__body {
        padding: 0 40px;

        h3 {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            text-align: center;
        }

        .nickname-input {
            margin: 20px 0;
        }

        .cs-button {
            margin: 10px 0;
        }
    }

    .el-dialog__footer {
        padding-top: 0 !important;
        padding-bottom: 38px;

        .el-button {
            width: 135px;
            height: 50px;
            background: #232527;
            border: #232527;
            color: #e2e2e2;
            font-size: 14px;
            font-weight: bold;

            &.el-button--primary {
                background: #ffe500;
                border-color: #ffe500;
                color: #121212;
            }
        }
    }
}
</style>